<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025情人节快乐（点阵效果版）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background: #000;
            font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; /* 统一字体族 */
        }

        canvas {
            position: absolute;
            display: block;
        }

        #canvas {
            z-index: 1;
        }

        #countdownCanvas {
            z-index: 4;
        }

        #pinkboard {
            z-index: 2;
            opacity: 0;
            transition: opacity 1s ease;
        }

        #child {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            opacity: 0;
            transition: opacity 1s ease;
            width: 100%;
            text-align: center;
        }

        h4 {
            font-size: clamp(24px, 6vw, 40px); /* 响应式字体大小 */
            color: #f584b7;
            margin: 0;
            padding: 0 20px;
            white-space: nowrap;
            letter-spacing: 2px;
            text-shadow: 0 0 5px rgba(245, 132, 183, 0.7);
            font-family: inherit; /* 继承body的字体设置 */
        }

        #countdownText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            font-size: clamp(80px, 20vw, 180px); /* 响应式字体大小 */
            color: #ffffff;
            opacity: 0;
            transition: opacity 0.5s ease;
            white-space: nowrap;
            padding: 0 20px;
            letter-spacing: 8px;
            text-shadow: 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.5);
            font-family: inherit; /* 继承body的字体设置 */
        }

        /* 加载提示 */
        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #f584b7;
            font-size: 20px;
            z-index: 10;
            opacity: 1;
            transition: opacity 0.5s ease;
            font-family: inherit; /* 继承body的字体设置 */
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            h4 {
                letter-spacing: 1px;
            }

            #countdownText {
                letter-spacing: 4px;
            }
        }

        @media (max-width: 480px) {
            h4 {
                font-size: 20px;
                white-space: normal;
            }

            #countdownText {
                font-size: 60px;
                letter-spacing: 2px;
            }
        }
    </style>
</head>
<body>
    <div id="loading">加载中...</div>
    <canvas id="canvas"></canvas>
    <canvas id="countdownCanvas"></canvas>
    <div id="countdownText">3</div>
    <div id="child">
        <h4>情人节快乐 宝贝❤</h4>
    </div>
    <canvas id="pinkboard"></canvas>

    <script>
        // 等待页面加载完成
        window.addEventListener('load', function() {
            document.getElementById('loading').style.opacity = '0';
            setTimeout(() => {
                document.getElementById('loading').style.display = 'none';
            }, 500);

            initAnimation();
        });

        function initAnimation() {
            // 粉色"I LOVE U"字符雨代码
            var canvas1 = document.getElementById('canvas');
            var ctx1 = canvas1.getContext('2d');

            function resizeCanvas1() {
                canvas1.width = window.innerWidth;
                canvas1.height = window.innerHeight;
            }
            resizeCanvas1();
            window.addEventListener('resize', resizeCanvas1);

            var texts = 'I LOVE YOU'.split(''); // 使用爱心符号更符合情人节主题
            var fontSize = Math.max(16, window.innerWidth / 80); // 响应式字体大小
            var columns = canvas1.width / fontSize;
            var drops = [];
            for (var x = 0; x < columns; x++) {
                drops[x] = Math.random() * canvas1.height / fontSize;
            }

            function drawMatrix() {
                ctx1.fillStyle = 'rgba(0, 0, 0, 0.05)';
                ctx1.fillRect(0, 0, canvas1.width, canvas1.height);
                ctx1.fillStyle = '#f584b7';
                // 修复字体设置，添加字体族
                ctx1.font = fontSize + 'px "Microsoft YaHei", "Segoe UI", Arial, sans-serif';
                for (var i = 0; i < drops.length; i++) {
                    var text = texts[Math.floor(Math.random() * texts.length)];
                    ctx1.fillText(text, i * fontSize, drops[i] * fontSize);
                    if (drops[i] * fontSize > canvas1.height || Math.random() > 0.95) {
                        drops[i] = 0;
                    }
                    drops[i]++;
                }
            }
            var matrixInterval = setInterval(drawMatrix, 33);

            // 点阵倒计时+粒子消散效果
            var countdownCanvas = document.getElementById('countdownCanvas');
            var countdownCtx = countdownCanvas.getContext('2d');
            var countdownText = document.getElementById('countdownText');
            var pinkboard = document.getElementById('pinkboard');
            var childText = document.getElementById('child');

            function resizeCanvas() {
                countdownCanvas.width = window.innerWidth;
                countdownCanvas.height = window.innerHeight;
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);

            // 点阵粒子类
            class CountdownParticle {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                    this.color = '#ffffff';
                    this.size = Math.random() * 3 + 1.5;
                    this.speedX = Math.random() * 4 - 2;
                    this.speedY = Math.random() * 4 - 2;
                    this.alpha = 1;
                    this.decay = Math.random() * 0.015 + 0.005;
                }

                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.alpha -= this.decay;
                }

                draw() {
                    countdownCtx.save();
                    countdownCtx.globalAlpha = this.alpha;
                    countdownCtx.fillStyle = this.color;
                    countdownCtx.beginPath();
                    countdownCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    countdownCtx.fill();
                    countdownCtx.restore();
                }
            }

            var particles = [];
            var countdownSteps = ['3', '2', '1', '2025', '情人节快乐', '我爱你'];
            var stepIndex = 0;
            var stepDuration = 1500;
            var isStepActive = true;
            var lastStepTime = Date.now();

            // 优化点阵生成
            function createTextParticles(text) {
                particles = [];
                countdownCtx.clearRect(0, 0, countdownCanvas.width, countdownCanvas.height);

                // 使用响应式字体大小
                var fontSize = Math.min(180, countdownCanvas.width / 6);
                // 修复字体设置，添加字体族
                countdownCtx.font = 'bold ' + fontSize + 'px "Microsoft YaHei", "Segoe UI", Arial, sans-serif';
                countdownCtx.textAlign = 'center';
                countdownCtx.textBaseline = 'middle';
                countdownCtx.fillStyle = '#ffffff';
                countdownCtx.fillText(text, countdownCanvas.width / 2, countdownCanvas.height / 2);

                // 点阵采样
                var imageData = countdownCtx.getImageData(0, 0, countdownCanvas.width, countdownCanvas.height);
                var data = imageData.data;

                // 根据屏幕大小调整采样间隔
                var sampleInterval = window.innerWidth > 768 ? 2 : 3;

                for (var y = 0; y < imageData.height; y += sampleInterval) {
                    for (var x = 0; x < imageData.width; x += sampleInterval) {
                        var index = (y * imageData.width + x) * 4;
                        var a = data[index + 3];

                        if (a > 80) {
                            particles.push(new CountdownParticle(x, y));
                        }
                    }
                }

                countdownCtx.clearRect(0, 0, countdownCanvas.width, countdownCanvas.height);
            }

            function countdownLoop() {
                requestAnimationFrame(countdownLoop);
                var now = Date.now();

                if (stepIndex < countdownSteps.length) {
                    if (isStepActive) {
                        countdownText.textContent = countdownSteps[stepIndex];
                        countdownText.style.opacity = 1;

                        if (now - lastStepTime > stepDuration) {
                            isStepActive = false;
                            countdownText.style.opacity = 0;
                            createTextParticles(countdownSteps[stepIndex]);
                            lastStepTime = now;
                        }
                    } else {
                        countdownCtx.clearRect(0, 0, countdownCanvas.width, countdownCanvas.height);
                        particles = particles.filter(p => {
                            p.update();
                            p.draw();
                            return p.alpha > 0;
                        });

                        if (particles.length === 0 && now - lastStepTime > 1000) {
                            stepIndex++;
                            isStepActive = true;
                            lastStepTime = now;
                        }
                    }
                } else {
                    // 最终显示爱心和文字
                    countdownCanvas.style.opacity = 0;
                    countdownText.style.opacity = 0;
                    pinkboard.style.opacity = 1;
                    childText.style.opacity = 1;
                    // clearInterval(matrixInterval); // 停止字符雨
                }
            }

            // 粉色爱心粒子效果
            var settings = {
                particles: {
                    length: 500,
                    duration: 2,
                    velocity: 100,
                    effect: -0.75,
                    size: 30,
                },
            };

            // 兼容requestAnimationFrame
            (function() {
                var lastTime = 0;
                var vendors = ['ms', 'moz', 'webkit', 'o'];
                for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
                    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                               || window[vendors[x]+'CancelRequestAnimationFrame'];
                }

                if (!window.requestAnimationFrame)
                    window.requestAnimationFrame = function(callback, element) {
                        var currTime = new Date().getTime();
                        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                          timeToCall);
                        lastTime = currTime + timeToCall;
                        return id;
                    };

                if (!window.cancelAnimationFrame)
                    window.cancelAnimationFrame = function(id) {
                        clearTimeout(id);
                    };
            }());

            // 爱心粒子系统
            (function() {
                var canvas = document.getElementById('pinkboard');
                var context = canvas.getContext('2d');
                var particles = [];
                var particleRate = settings.particles.length / settings.particles.duration;
                var time;

                function resizePinkboard() {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                }
                resizePinkboard();
                window.addEventListener('resize', resizePinkboard);

                // 心形曲线函数
                function pointOnHeart(t) {
                    return {
                        x: 160 * Math.pow(Math.sin(t), 3),
                        y: 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
                    };
                }

                // 创建心形图像
                var heartImage = (function() {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = settings.particles.size;
                    canvas.height = settings.particles.size;

                    function to(t) {
                        var point = pointOnHeart(t);
                        point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
                        point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
                        return point;
                    }

                    ctx.beginPath();
                    var t = -Math.PI;
                    var point = to(t);
                    ctx.moveTo(point.x, point.y);
                    while (t < Math.PI) {
                        t += 0.01;
                        point = to(t);
                        ctx.lineTo(point.x, point.y);
                    }
                    ctx.closePath();
                    ctx.fillStyle = '#ea80b0';
                    ctx.fill();

                    var image = new Image();
                    image.src = canvas.toDataURL();
                    return image;
                })();

                // 粒子类
                function Particle() {
                    this.position = {x: 0, y: 0};
                    this.velocity = {x: 0, y: 0};
                    this.acceleration = {x: 0, y: 0};
                    this.age = 0;
                }

                Particle.prototype.initialize = function(x, y, dx, dy) {
                    this.position.x = x;
                    this.position.y = y;
                    this.velocity.x = dx;
                    this.velocity.y = dy;
                    this.acceleration.x = dx * settings.particles.effect;
                    this.acceleration.y = dy * settings.particles.effect;
                    this.age = 0;
                };

                Particle.prototype.update = function(deltaTime) {
                    this.position.x += this.velocity.x * deltaTime;
                    this.position.y += this.velocity.y * deltaTime;
                    this.velocity.x += this.acceleration.x * deltaTime;
                    this.velocity.y += this.acceleration.y * deltaTime;
                    this.age += deltaTime;
                };

                Particle.prototype.draw = function(context, image) {
                    function ease(t) { return (--t) * t * t + 1; }
                    var size = image.width * ease(this.age / settings.particles.duration);
                    context.globalAlpha = 1 - this.age / settings.particles.duration;
                    context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
                };

                // 粒子池
                function ParticlePool(length) {
                    this.particles = new Array(length);
                    for (var i = 0; i < length; i++) {
                        this.particles[i] = new Particle();
                    }
                    this.firstActive = 0;
                    this.firstFree = 0;
                    this.duration = settings.particles.duration;
                }

                ParticlePool.prototype.add = function(x, y, dx, dy) {
                    this.particles[this.firstFree].initialize(x, y, dx, dy);
                    this.firstFree++;
                    if (this.firstFree == this.particles.length) this.firstFree = 0;
                    if (this.firstActive == this.firstFree) this.firstActive++;
                    if (this.firstActive == this.particles.length) this.firstActive = 0;
                };

                ParticlePool.prototype.update = function(deltaTime) {
                    var i;
                    if (this.firstActive < this.firstFree) {
                        for (i = this.firstActive; i < this.firstFree; i++) {
                            this.particles[i].update(deltaTime);
                        }
                    }
                    if (this.firstFree < this.firstActive) {
                        for (i = this.firstActive; i < this.particles.length; i++) {
                            this.particles[i].update(deltaTime);
                        }
                        for (i = 0; i < this.firstFree; i++) {
                            this.particles[i].update(deltaTime);
                        }
                    }
                    while (this.particles[this.firstActive].age >= this.duration && this.firstActive != this.firstFree) {
                        this.firstActive++;
                        if (this.firstActive == this.particles.length) this.firstActive = 0;
                    }
                };

                ParticlePool.prototype.draw = function(context, image) {
                    var i;
                    if (this.firstActive < this.firstFree) {
                        for (i = this.firstActive; i < this.firstFree; i++) {
                            this.particles[i].draw(context, image);
                        }
                    }
                    if (this.firstFree < this.firstActive) {
                        for (i = this.firstActive; i < this.particles.length; i++) {
                            this.particles[i].draw(context, image);
                        }
                        for (i = 0; i < this.firstFree; i++) {
                            this.particles[i].draw(context, image);
                        }
                    }
                };

                var particlePool = new ParticlePool(settings.particles.length);

                function render() {
                    requestAnimationFrame(render);
                    var newTime = new Date().getTime() / 1000;
                    var deltaTime = newTime - (time || newTime);
                    time = newTime;

                    context.clearRect(0, 0, canvas.width, canvas.height);

                    var amount = particleRate * deltaTime;
                    for (var i = 0; i < amount; i++) {
                        var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                        var dir = {
                            x: pos.x,
                            y: pos.y
                        };
                        var length = Math.sqrt(dir.x * dir.x + dir.y * dir.y);
                        if (length !== 0) {
                            dir.x /= length;
                            dir.y /= length;
                        }
                        dir.x *= settings.particles.velocity;
                        dir.y *= settings.particles.velocity;
                        particlePool.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
                    }

                    particlePool.update(deltaTime);
                    particlePool.draw(context, heartImage);
                }

                // 延迟启动爱心动画，等待倒计时结束
                setTimeout(function() {
                    render();
                }, countdownSteps.length * (stepDuration + 1000) + 500);
            })();

            // 启动倒计时
            countdownLoop();
        }
    </script>
</body>
</html>
